<template>
  <el-row :gutter="20">
    <el-col :span="15" class="el-left">
      <div class="grid-content bg-purple">
        <div class="pingtai">
          <div class="p-img">
            <p class="title">收益概况</p>
            <div class="img-text">
              <img src="../../../assets/images/shouyeimg/图标1.png" alt />
              <div>
                <p>525753.85元</p>
                <p>平台收益额</p>
                <p>比上月增长5%</p>
              </div>
            </div>
          </div>
          <div class="p-img">
            <p class="title">订单总量</p>
            <div class="img-text">
              <img src="../../../assets/images/shouyeimg/图标2.png" alt />
              <div>
                <p>7525单</p>
                <p>平台订单数</p>
                <p>比上月增长4%</p>
              </div>
            </div>
          </div>
          <div class="p-img">
            <p class="title">平台用户</p>
            <div class="img-text">
              <img src="../../../assets/images/shouyeimg/图标3.png" alt />
              <div class>
                <p>5257人</p>
                <p>平台总人数</p>
                <p>比上月增长2%</p>
              </div>
            </div>
          </div>
        </div>
        <div class="jingpin">
          <p class="title">
            课程管理
            <span>
              更多详情
              <img src="../../../assets/images/shouyeimg/jiantou.png" alt />
            </span>
          </p>

          <div class="jp-text-img">
            <img src='../../../assets/images/shouyeimg/语文.png' alt= />
            <div class="jp-text">
              <p style="color: #f7a864">冲刺</p>
              <p>六年级语文学习思维冲刺练习训练</p>
              <p>￥1699</p>
              <p>
                583人观看
                <span>共30节</span>
              </p>
            </div>
          </div>
          <div class="jp-text-img">
            <img src='../../../assets/images/shouyeimg/英语.png' alt= />
            <div class="jp-text">
              <p>冲刺</p>
              <p>六年级英语口语学习冲刺练习训练</p>
              <p>￥1899</p>
              <p>
                748人观看
                <span>共31节</span>
              </p>
            </div>
          </div>
          <div class="jp-text-img">
            <img src='../../../assets/images/shouyeimg/提升.png' alt= />
            <div class="jp-text">
              <p>冲刺</p>
              <p>六年级英语口语学习冲刺练习训练</p>
              <p>￥1899</p>
              <p>
                748人观看
                <span>共31节</span>
              </p>
            </div>
          </div>
        </div>
        <div class="xitong">
          <p class="title">
            系统消息
            <span>
              更多详情
              <img src="../../../assets/images/shouyeimg/jiantou.png" alt />
            </span>
          </p>

          <el-table
            :data="tableData"
            @row-click="fu"
            style="width: 100%"
            :show-header="false"
          >
            <el-table-column width="50">
              <img src="../../../assets/images/shouyeimg/信封.png" alt />
            </el-table-column>
            <el-table-column prop="name" label="Name" width="100" />
            <el-table-column prop="actives" label="actives" width="100" />
            <el-table-column prop="title" label="title" />
            <el-table-column prop="time" label="time" width="100" />
          </el-table>
        </div>
      </div>
    </el-col>
    <el-col :span="9" class="el-right">
      <!-- <Rili /> -->
      <div class="grid-content bg-purple">
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p class="title title-xian">日程任务</p>
              <div class="rili">
                <el-calendar ref="calendar">
                  <template #header="{ date }">
                    <el-button-group>
                      <el-button size="small" @click="selectDat('prev-year')">
                        <img
                          src="../../../assets/images/shouyeimg/左双箭头.png"
                          alt
                        />
                      </el-button>
                      <el-button size="small" @click="selectDat('prev-month')">
                        <img
                          src="../../../assets/images/shouyeimg/单独箭头.png"
                          alt
                        />
                      </el-button>
                      <el-button
                        class="rili-btn3"
                        size="small"
                        @click="selectDat('today')"
                      >
                        <span>{{ date }}</span>
                      </el-button>
                      <el-button size="small" @click="selectDat('next-month')">
                        <img
                          src="../../../assets/images/shouyeimg/单独箭头.png"
                          alt
                        />
                      </el-button>
                      <el-button size="small" @click="selectDat('next-year')">
                        <img
                          src="../../../assets/images/shouyeimg/jiantou.png"
                          alt
                        />
                      </el-button>
                    </el-button-group>
                  </template>
                </el-calendar>
                <div class="anpai">
                  <div class="ap-time">
                    <p>07:30—10:00</p>
                    <p>
                      考勤
                      <br />(查看教师上课情况)
                    </p>
                  </div>
                  <div class="ap-time">
                    <p>10:30—12:00</p>
                    <p>
                      课程安排
                      <br />((初中数学)
                    </p>
                  </div>
                  <div class="ap-time">
                    <p>14:30—16:25</p>
                    <p>
                      视频会议
                      <br />(全体英语教师)
                    </p>
                  </div>
                  <div class="ap-time">
                    <p>17:15—19:00</p>
                    <p>
                      教研活动
                      <br />(如何提高学生的学习兴趣)
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="grid-content bg-purple-dark">
              <p class="title title-xian">待办事项</p>
              <div class="search">
                <el-input
                  v-model="input"
                  placeholder="添加代办事项"
                  clearable
                />
                <el-button type="primary" @click="handerClick(input)"
                  >添加</el-button
                >
              </div>

              <el-table
                ref="multipleTableRef"
                :data="user"
                style="width: 100%"
                @selection-change="handleSelectionChange"
                :show-header="false"
              >
                <el-table-column type="selection" width="55" />
                <el-table-column property="masage" lable="input" />
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-col>
  </el-row>
  <!-- 弹框 -->
  <el-dialog
    title="系统信息"
    v-model="dialogVisible"
    class="my-bigDialog"
    width="50%"
    :before-close="handleClose"
  >
    <h1>
      巾帼不让须眉，新时代的”红色娘子军
      <br />抗疫先进事迹材料医护人员、教师、社区干部
    </h1>
    <span class="dailog">
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        2021年这个春节注定与往年不同，面对来势汹汹的新冠肺炎疫情，在全国各地，流动着―道道红色身影，她们有的是医生护士，有的是老师，有的是党员干部,她们坚持冲锋在一线、默默泰献在基层，用柔弱的身躯，筑起一道道坚固防线，以自己的实际行动展现了打赢疫惘防控阻击战的巾帼力量。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        她们是冲锋在菌、战在一线的白衣天使。有这样一道红色身影，她们来自定点救治医院的护理医疗队。三分治疗七分护理”，疫情发生以来，_家医院_名护士主动请战，申请到疫情防控定点医院参与救治工作，她们组建了临时护理党变部，重温了入觉誓词，立志要在抗击疫情中发挥先锋模范作用，展现巾帼儿女风采。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        时间就是生命,她们每天日个小时的工作时闻连轴转
        为了节省医疗物资,为了方便黑护患者。与时闻
        赛跑她们解一次穿上纸尿裤，做到上岗前少喝水,不喝力
        。尽最大努力降低防护服的更换频率，不知道衣
        服被汗水漫湿了又干,干了又湿多少次。哪有什么白衣天使，不过是一群女子，换了一身衣服，在死神手里抢人罢了。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        她们是以身作则、守在一行的辛勤园丁。有这样一道红色身影，她们来自__县幼儿园。三尺讲台，她们是教书育人的辛勤园丁;抗疫战场，她们是无怨无悔的志愿先锋，一方面，她们认真落实教育系统关于疫情防控工作精神，积极通过班级群，认真傲好每个班级、每名学生的防控知识宣传、家庭外出情况排查等工作，切实加强对学生和家长的宣传教育，告知家长做好家庭防范工作，切实筑牢教育防疫的第一道防线。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        另一方面，她们认真践行把人民群众生命安全和身体健康放在第一位的工作宗旨，积极晌应县委县政府号召，主动参与小区包保工作，实行24小时值班值守，换岗不脱岗，严格管理小区人员及车辆出入，禁止非小区成员和车辆进入小区，确保小区“封闭式°管理落到实处，全力守护我们的家园，为坚决打赢打好资情防控阻击战员献自己的力量。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        始们是敢于担当、走在一线的党员干部。有这样一道红色身影，她们来自各个社区的党员干部。因疫情防控压力大，人手不足，县委县政府全城招募志愿者，来自各个社区的__名党员干部(其中有_名女志愿者)积极参与，W跃报名，主动参与宣传引导、便民服务．秩序维护、心理疏导等志愿服务中来。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        在我们身边，这样的一道道身影还有很多很多，她们奋战在疫情防控的每个角落，撑起了战“疫"的“半边天"，是新时代的“红色娘子军”。
      </p>
      <p>
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 作者：南者师
        <br />2021.12.11
      </p>
    </span>
  </el-dialog>
</template>
<script>
import { reactive, toRefs, ref } from "vue";
// import Rili from "@/views/index/components/comp/Rili.vue";
export default {
  setup() {
    //弹框
    const dialogVisible = ref(false);
    // 系统
    const date = reactive({});
    const tableData = [
      {
        name: "赵老师",
        actives: "最新文章",
        title: "巾帼不让须眉，新时代的”红色娘子军",
        time: "10分钟前",
      },
      {
        name: "王老师",
        actives: "活动内容",
        title: "2021年秋期教研工作心得体会",
        time: "1小时前",
      },
    ];
    //日历
    const calendar = ref();
    const selectDate = (val) => {
      calendar.value.selectDate(val);
    };
    //待办事项
    const input = ref("");
    const user = ref([
      {
        masage: "提前给全体老师发布国庆放假通知",
      },
      {
        masage: "12月15日上午十点全体老师视频会议",
      },
      {
        masage: "记录10月13日会议重要内容  ",
      },
    ]);
    //系统消息点击出弹框
    const fu = (row) => {
      dialogVisible.value = true;
      console.log(row.title);
    };
    //添加
    const handerClick = (input1) => {
      if (input1 == "") {
        input.value = "";
      } else {
        user.value = [
          ...user.value,
          {
            masage: input1,
          },
        ];
        //
      }
      input.value = "";
    };
    return {
      // handerClick,
      // handleSelectionChange,

      selectDate,
      tableData,
      ...toRefs(date),
      user,
      input,
      dialogVisible,
      fu,
      handerClick,
    };
  },
  components: {
    // Rili,
  },
  //日历
  methods: {
    selectDat(value) {
      this.$refs.calendar.selectDate(value);
    },
  },
};
</script>

<style lang="less" scoped>
.el-main {
  text-align: center;
  .grid-content {
    // height: 500px;
    overflow: hidden;
    min-height: 36px;
  }
  .pingtai,
  .jingpin,
  .xitong {
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    margin-bottom: 20px;
  }
  // 平台
  .pingtai {
    height: 172px;
    display: flex;
    justify-content: space-between;
    .p-img {
      width: 100%;
      // padding: 20px;
      border-radius: 10px;
      img {
        width: 90px;
        height: 92px;
        // border: 1px #333 dashed;
      }
    }
    .p-img:nth-of-type(2) {
      margin: 0 20px;
    }
    .img-text {
      display: flex;
      justify-content: space-around;
      p {
        font-size: 18px;
        font-family: Arial;
        color: #333333;
        line-height: 27px;
        text-align: center;
      }
      p:nth-of-type(1) {
        font-weight: bold;
        letter-spacing: 3px;
      }
      p:nth-of-type(3) {
        font-size: 14px;
      }
    }
  }
  // 标题
  .title {
    font-size: 18px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #333333;
    line-height: 15px;
    margin-bottom: 20px;
    letter-spacing: 3px;
    span {
      float: right;
      font-weight: normal;
    }
  }
  // 精品
  .jingpin {
    // height: 400px;
    .jp-text-img {
      padding-left: 30px;
      display: flex;

      img {
        width: 385px;
        margin-right: 30px;
        border-radius: 10px;
      }
      .jp-text {
        background-color: #fff;
        width: 290px;
        p {
          font-size: 16px;
          font-family: Microsoft YaHei;
          font-weight: bold;
          color: #444444;
          letter-spacing: 3px;
          line-height: 30px;
        }
        p:nth-of-type(1) {
          color: #84baf9;
          font-size: 16px;
        }

        p:nth-of-type(2) {
          font-size: 16px;
        }
        p:nth-of-type(3) {
          color: #f7aa67;
          font-size: 24px;
          letter-spacing: 4px;
        }
        p:nth-of-type(4) {
          font-size: 14px;
          span {
            float: right;
          }
        }
      }
    }
    .jp-text-img:nth-of-type(2) {
      margin: 10px 0;
    }
  }
  //系统
  .xitong {
    height: 220px;
    margin-bottom: 0;
    color: #333333;
    line-height: 21px;
    /deep/.el-table__row {
      font-family: Microsoft YaHei;
      font-weight: bold;
      font-size: 15px;
      /deep/.el-el-table_1_column_1 {
        .cell {
          line-height: 40px;
        }
      }
    }
    /deep/.el-table_1_column_4 {
      .cell {
        color: #598cff;
        cursor: pointer;
      }
      .cell:hover {
        text-decoration: underline;
        color: #83a8fd;
      }
    }
    /deep/.el-table_1_column_5 {
      .cell {
        font-weight: normal;
      }
    }
  }
  // 右边
  .el-right {
    // 日历
    /deep/.el-row {
      height: 430px;
      margin-bottom: 20px;
      background: #fff;
      border-radius: 10px;
    }
    .bg-purple-dark {
      padding: 20px;
      // height: 500px;
    }
    // 标题下的线
    .title-xian {
      ::after {
        content: "";
        width: 100%;
        height: 2px;
        display: block;
        border-bottom: 2.5px solid #598cff;
        border-radius: 2px;
        position: absolute;
        top: 45px;
        left: 0;
      }
    }
    .rili {
      display: flex;
      .anpai {
        width: 170px;
        font-size: 14px;
        font-weight: 400;
        color: #333333;
        line-height: 24px;
        .ap-time {
          margin-bottom: 10px;
          letter-spacing: 2px;
          font-size: 14px;
        }
      }
    }
    .el-calendar {
      width: 300px;
      --el-calendar-border: none;
      --el-calendar-header-border-bottom: none;
      /deep/.el-calendar__header {
        padding: 12px 5px;
      }
      /deep/ .el-button {
        padding: 0;
        margin-right: 5px;
        padding: 0 8px;
        height: 30px;
        /deep/.el-button:nth-of-type(3) {
          width: 90px;
          // height: 30px;
        }
      }
      /deep/ .el-calendar__body {
        padding: 0 40px 0 5px;
        .el-calendar-day {
          box-sizing: border-box;
          // padding: 8px;
          height: 44px;
          font-size: 16px;
        }
      }
    }
    .is-selected {
      color: #1989fa;
    }
    // input样式
    .search {
      // height: 100px;
      border-radius: none;
      display: flex;
      margin-bottom: 20px;
      /deep/.el-input__inner {
        height: 40px;
        font-size: 16px;
        color: #333333;
      }
      /deep/.el-input {
        width: 350px;
        margin-right: 20px;
        border-color: #999999;
        ::placeholder {
          color: #666666;
          letter-spacing: 3px;
        }
      }
      //添加按钮
      /deep/.el-button--primary {
        width: 80px;
        height: 30px;
        border-radius: 10px;
        font-size: 18px;
      }
    }
    //添加事项样式
    /deep/.el-table__row {
      padding: 5px 12px;
      .el-table__cell {
        font-weight: normal;
        font-family: Microsoft YaHei;
        font-size: 16px;
        color: #333333;
        letter-spacing: 3px;
        .el-checkbox__inner {
          width: 20px;
          height: 20px;
          border-color: #999999;
        }
      }
    }
    //多选框对号样式
    /deep/.el-checkbox__inner::after {
      height: 12px;
      left: 7px;
      width: 5px;
      // background-color: #999;
    }
  }
}
//弹框

h1 {
  text-align: center;
  font-size: 22px;
  letter-spacing: 3px;
  font-family: Microsoft YaHei;
  margin-bottom: 30px;
}
.dailog {
  font-size: 18px;
  font-family: Microsoft YaHei;
  p {
    margin-bottom: 25px;
    line-height: 25px;
    letter-spacing: 2px;
  }
  p:nth-last-child(1) {
    text-align: end;
    padding: 50px 20px 0px 0;
  }
}
</style>
